<template>
  <div>
    <t-space break-line>
      <template v-for="it in allStatus">
        <t-card :title="it.name">
          <t-space direction="vertical">
            <t-tag :theme="TagColor(it.heartbeat)" variant="light-outline">
              <template #icon>
                <LogoWindowsFilledIcon/>
              </template>
              协程量：
              {{ it.goroutine }}
            </t-tag>
            <t-tag :theme="TagColor(it.heartbeat)" variant="light-outline">
              <template #icon>
                <UsbIcon/>
              </template>
              端口号：
              {{ it.port }}
            </t-tag>
            <t-tag :theme="TagColor(it.heartbeat)" variant="light-outline">
              <template #icon>
                <HeartFilledIcon/>
              </template>
              心跳时间：
              {{ toLocalTimeByTimeSecond(it.heartbeat) }}
            </t-tag>
            <t-tag :theme="TagColor(it.heartbeat)" variant="light-outline">
              <template #icon>
                <PinFilledIcon/>
              </template>
              编译信息：
              {{ it.build_time }}
            </t-tag>
          </t-space>
        </t-card>
      </template>
    </t-space>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, onUnmounted, ref} from "vue";
import {LogoWindowsFilledIcon, HeartFilledIcon, UsbIcon, PinFilledIcon} from "tdesign-icons-vue-next"
import api from "../../../api/api";
import {curTimeUnix, toLocalTimeByTimeSecond} from "../../../tool/time";

interface Status {
  name: string
  heartbeat: number
  port: number
  goroutine: number
  build_time: string
}

const allStatus = ref(new Array<Status>())
const curUnix = ref(0)
const wheel = ref(0)
onMounted(() => {
  UpdateStatus()
  wheel.value = setInterval(() => {
    UpdateStatus()
  }, 10000)
})
onUnmounted(async () => {
  clearInterval(wheel.value)
})

const UpdateStatus = async () => {
  let res = await api.Root.GetAllStatus()
  if (res != null) {
    curUnix.value = curTimeUnix()
    allStatus.value = res.data as Array<Status>
  }
}

const TagColor = (heartbeat: number): string => {
  if (curUnix.value - heartbeat > 60) {
    return "default"
  }
  return "success"
}
</script>